/* 首页卡片 */
.big{
  width: 100%;
  margin: 0 auto;
}
.smal{
  width: 200px;
  height: 50px;
  display: inline-block;
  padding: 25px;
  margin-left: 10%;
  margin-top: -2%;
}
.smal img{
  width: 350px;
  height: 150px;
}
.smal :hover{
  transform: translateY(-1em);
  transition: transform 0.1s ease;

}


/*每日推荐卡片 */
.page.active{
    width: 75%;
    height: 80%;
    background-color: #f6f6f6;
    margin: 0 auto;
}
.wrapper1{
  background-color: #f6f6f6;
  height: 845px;
  margin-top:-1%;
}
.wrapper1 .lesson{
  padding: 20px;

}
/* 书本小盒子 */
.small{
    width: 400px;
    height: 200px;
    background-color: #f6f6f6;
    display: inline-block;
    margin-left: 5%;
    margin-bottom: 5px;
    margin-top: 2%;
    margin-right:5%;
    vertical-align: middle;
}
.container{
    margin: 0 auto;
    width: 40%;
    height: 20%;
    text-align: center;
    margin-top: 20px;
}
.neirong{
    display: inline-block;
    font-size: 22px;
    margin: 10px 30px ;
}
.neirong a:hover{
    border-bottom: solid #f6f6f6 3px;
}
.book{
    margin: 0 auto;
    width: 70%;
    height: 45px;
    text-align: center;
    margin-top: 20px;
}
.shuji{
    display: inline-block;
    padding-left: 70px;
    padding-top: 6px;
    padding-right: 70px;
}
.small img{
    width: 170px;
    height: 200px;
    float: left;
}
.small h2{
    float: left;
}
.small p{
    float: left;
}
.neirong a{
text-decoration: none;
color: black;
padding: 5px 5px 10px 10px;
}
.shuji a{
font-size: 22px;
text-decoration: none;
color: black;
padding: 5px 5px 10px 10px;
}
.small a{
text-decoration: none;
color: black;
padding: 5px 5px 10px 10px;
}
.shuji a:hover{
border-bottom: solid rgb(210, 200, 146) 3px;
}
.neirong a:visited{
color: black;
}
.shuji a:visited{
color: black;
}
.small img{
    transition: box-shadow 0.5s;
}
.small img:hover{
    
transform: scale(1.2,1.2);
}
/* 下划线 */
.classcard {
  font-size: 35px;
  display: inline-block;
  position:relative;
}
.classcard::after{
 content: '';
 position: absolute;
 width: 100%;
 transform: scaleX(0);
 height: 5px;
 bottom: -7px;
 left: 0;
 background-color:#3b82f6;
 transform-origin: bottom right;
 transition: transform 0.25s ease-out;
}
.classcard:hover::after{
  transform: scaleX(1);
  transform-origin: bottom left;
}
.lesson{
  text-align: center;
} 
/* 文字 */

.classcard {
    font-size: 35px;
    display: inline-block;
    position:relative;
  }
  .classcard::after{
   content: '';
   position: absolute;
   width: 100%;
   transform: scaleX(0);
   height: 5px;
   bottom: -7px;
   left: 0;
   transform-origin: bottom right;
   transition: transform 0.25s ease-out;
  }
  .classcard:hover::after{
    transform: scaleX(1);
    transform-origin: bottom left;
  }
  


/* 自适应 */
@media(max-width:768px){
  .smal .img11{
    width: 300px;
    height: 200px;
    margin-left: -5%;
    margin-top: 5%;
  }
  .smal .img22{
    width: 300px;
    height: 200px;
    margin-left: -5%;
    margin-top: -5%;
  }
  .smal .img33{
    width: 300px;
    height: 200px;
    margin-left: -5%;
    margin-top: -4%;
  }

  /* 课程卡片 */
  .wrapper1{
    margin-left: -20%;
    width: 525px;
  }
  .classcard{
    margin-left: 25%;
  }
}
@media(max-width:368px){
  .smal .img11{
    width: 300px;
    height: 200px;
    margin-left: -5%;
    margin-top: 5%;
  }
  .smal .img22{
    width: 300px;
    height: 200px;
    margin-left: -5%;
    margin-top: -5%;
  }
  .smal .img33{
    width: 300px;
    height: 200px;
    margin-left: -5%;
    margin-top: -15%;
  }
  
  /* 课程卡片 */
  .wrapper1{
    margin-left: -30%;
    width: 530px;
  }
  .classcard{
    margin-left: 25%;
  }

}